<template>
  <div>
    <div class="table-grid-content">
      <el-button type="primary" @click="addRow()">新增</el-button>
      <el-input v-model.lazy="input" class="search" placeholder="请输入搜索内容" clearable></el-input>
      <el-button type="success" icon="el-icon-search">搜索</el-button>
    </div>
    <!-- 分页功能的实现 -->
    <el-table :data="tables.slice((currentPage-1)*pagesize,currentPage*pagesize)">
      <el-table-column prop="index" width="50"></el-table-column>
      <el-table-column prop="date" label="日期" width="140"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column>
        <!-- 为了解决在elementui运用表格用不了v-for方法获取下标，使用下面方法获取该行元素数据-->
        <template slot-scope="scope">
          <!-- 点击编辑时将数据下表和该行数据 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(scope.row.index, scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.row.index,tables)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40"
    ></el-pagination>
    <!-- 修改学生信息弹窗 -->
    <el-dialog title="学生信息" :visible.sync="dialogFormVisible">
      <el-form>
        <!-- 弄一个空的editform数组用来存储该行数据,以避免修改数据没提交时调用v-model。 -->
        <el-form-item label="姓名" :label-width="formLabelWidth" :model="editForm">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-input v-model="editForm.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="editForm.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="sumbitEditRow()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加学生信息弹窗 -->
    <el-dialog title="新增学生信息" :visible.sync="addFormVisible">
      <el-form>
        <!-- 弄一个空的editform数组用来存储该行数据,以避免修改数据没提交时调用v-model。 -->
        <el-form-item label="姓名" :label-width="formLabelWidth" :model="addForm">
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-input v-model="addForm.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="addForm.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel1()">取 消</el-button>
        <el-button type="primary" @click="sumbitAddRow()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Grade",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "1"
        },
        {
          date: "2016-05-01",
          name: "王小明",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "2"
        },
        {
          date: "2016-05-08",
          name: "王小红",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "3"
        },
        {
          date: "2016-05-01",
          name: "王小亮",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "4"
        },
        {
          date: "2016-05-22",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "5"
        },
        {
          date: "2016-05-01",
          name: "王小明",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "6"
        },
        {
          date: "2016-05-08",
          name: "王小红",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "7"
        },
        {
          date: "2016-05-01",
          name: "王小亮",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "8"
        },
        {
          date: "2016-05-22",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "9"
        },
        {
          date: "2016-05-22",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "10"
        },
        {
          date: "2016-05-01",
          name: "王小明",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "11"
        },
        {
          date: "2016-05-08",
          name: "王小红",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "12"
        },
        {
          date: "2016-05-01",
          name: "王小亮",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "13"
        },
        {
          date: "2016-05-22",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          index: "14"
        }
      ],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      editForm: [],
      index1: [],
      addForm: {},
      addFormVisible: false,
      input: "",
      currentPage: 1, //初始页
      pagesize: 6, //    每页的数据
      userList: []
    };
  },
  methods: {
    //编辑数据
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.editForm = Object.assign({}, row);
      this.index1 = index - 1;
      // console.log(index)
      console.log(this.index1);
      //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
    },
    //保存编辑
    sumbitEditRow() {
      var editData = this._index;
      this.tableData[editData].name = this.editForm.name;
      this.tableData[editData].date = this.editForm.date;
      this.tableData[editData].address = this.editForm.address;
      this.dialogFormVisible = false;
      this.$message({
        type: "success",
        message: "修改成功!"
      });
    },
    cancel() {
      this.dialogFormVisible = false;
      this.$message({
        type: "error",
        message: "取消修改!"
      });
    },
    //  删除数据
    handleDelete(index) {
      var i = 0;
      var j = 0;
      //获取删除元素在数据中的数组下表
      for (i; i < this.tableData.length; i++) {
        if (index == this.tableData[i].index) {
          j = i;
        }
      }
      console.log(j);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //将对应下标的数据删除
          this.tableData.splice(j, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(err => {
          this.$message({
            type: "error",
            message: err
          });
        });
    },
    //新增数据
    addRow() {
      this.addFormVisible = true;
      this.addForm = {
        name: "",
        date: "",
        address: ""
      };
    },
    //将新增的数据添加到表格中
    sumbitAddRow() {
      if (
        this.addForm.name != "" &&
        this.addForm.date != "" &&
        this.addForm.address != ""
      ) {
        this.tableData.push({
          name: this.addForm.name,
          date: this.addForm.date,
          address: this.addForm.address
        });
        this.$message({
          type: "success",
          message: "添加数据成功!"
        });
      } else {
        this.$message({
          type: "error",
          message: "添加数据失败!"
        });
      }
      this.addFormVisible = false;
    },
    cancel1() {
      this.$message({
        type: "error",
        message: "取消成功!"
      });
      this.addFormVisible = false;
    },
    //分页功能的实现
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
      //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      //点击第几页
    }
    // handleUserList() {
    //     this.$http.get('http://localhost:3000/userList').then(res => {  //这是从本地请求的数据接口，
    //         this.userList = res.body
    //     })
  },
  computed: {
    // 搜索功能的实现，如果搜索到内容的话把内容渲染到tables中，否则显示之前所有数据
    tables() {
      const input = this.input;
      if (input) {
        return this.tableData.filter(data => {
          return Object.keys(data).some(key => {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(input) > -1
            );
          });
        });
      }
      return this.tableData;
    }
  }
};
</script>
<style lang='stylus' scoped>
.search {
  display: inline-block;
  width: 500px;
}
</style>